<template>
	<view :class="{total:!total_class,total1:total_class}" id="total">
		<view @click="test()" :class="{cover_all:cover_boo,cover_fade:cover_boo1}" @touchmove.stop.prevent="moveStop()" ></view>
		<uni-search-bar></uni-search-bar>
		<view class="intro">
			<view style="display: flex;flex-direction: column;width: 500rpx;height: 250rpx;justify-content: space-around;">
				<view style="display: flex;flex-direction: column;">
					<span  style="font-weight: bold;color: #1a1a1a;font-size: 42rpx;">山东财经大学圣井门店{{search}}  ></span>
					<view style="display: flex;align-items: center;margin-top: 10rpx;">
						<!-- <image src="../../../../static/定向.png" style="height: 30rpx;width: 30rpx;"></image>
						<span style="color: gray;font-size: 35rpx;padding-left: 10rpx;">距离您0km</span> -->
						<uni-search-bar @confirm="doSearch"></uni-search-bar>
					</view>
				</view>
				
				
				
			</view>
			<view style="display: flex;flex-direction: column;height: 300rpx;justify-content: space-around;margin-top: 20rpx;">
				<view @click="waimai()" style="font-size: 35rpx;width: 220rpx;height: 75rpx;border-radius: 40rpx;background-color:#ededed;color: darkgray;font-weight: bold;display: flex;justify-content: flex-end;">
					<view style="width: 110rpx;height: 65rpx;background-color: green;border-radius: 40rpx;text-align: center;color: white;font-weight: bold;padding-top: 10rpx;padding-right: 4rpx;">
						\n自取
					</view>
					<span style="font-size: 30rpx;width: 100rpx;height: 70rpx;padding-top: 10rpx;padding-left: 10rpx;">外卖</span>
					
				</view>
				<span style="font-size: 30rpx;color: #aaaaaa;margin-bottom: 20rpx;" @click="info()">点此查看门店信息  ></span>
			</view>
			
			
			<Info :boo="info_boo" v-show="info_boo[0]" ref="info" style="box-shadow: 0rpx 10rpx 3rpx #aaaaaa;border-radius:30rpx ;position: absolute;top: 145rpx;z-index: 100;left: 0rpx;background-color: white;"></Info>
			
			
			
		</view>
		<view class="recommend" >
			
			<span style="font-weight: bold;margin-left: 15rpx;">商家推荐</span>
			<view style="width: 700rpx;display: flex;height: 560rpx;overflow: scroll;" >
				
				<view style="box-shadow:  2rpx 6rpx 5rpx 1rpx #f0f0f0  ;padding-left: 20rpx;width: 250rpx;height: 500rpx;display: flex;background-color: white;display: flex;flex-direction: column;justify-content: space-around;">
					<image src="../../../../static/drink1.png" style="width: 200rpx;height: 260rpx;margin-left: 20rpx;"></image>
					<span style="font-weight: bold;font-size: 32rpx;margin-left: 5rpx;">爆打水果茶</span>
					<view style="display: flex;width: 250rpx;align-items: center;">
						<span style="color: red;font-weight: 700;font-size: 35rpx;">￥12</span>
						<span @click="noItem()" style="line-height: 60rpx;font-size: 55rpx;text-align: center;margin-left:100rpx;height: 65rpx;width: 65rpx;border-radius: 150rpx;background-color: green;color: white;">+</span>
					</view>
				</view>
				<view style="box-shadow:  2rpx 6rpx 5rpx 1rpx #f0f0f0  ;width: 250rpx;height: 500rpx;display: flex;margin-left: 25rpx;background-color: white;display: flex;flex-direction: column;justify-content: space-around;">
					<image src="../../../../static/drink2.png" style="width: 200rpx;height: 260rpx;margin-left: 20rpx;"></image>
					<span style="font-weight: bold;font-size: 32rpx;margin-left: 5rpx;">巴厘岛超级鲜果茶</span>
					<view style="display: flex;width: 250rpx;align-items: center;">
						<span style="color: red;font-weight: 700;font-size: 35rpx;">￥16</span>
						<span @click="noItem()" style="line-height: 60rpx;font-size: 55rpx;text-align: center;margin-left:100rpx;height: 65rpx;width: 65rpx;border-radius: 150rpx;background-color: green;color: white;">+</span>
					</view>
				</view>
				<view style="box-shadow:  2rpx 6rpx 5rpx 1rpx #f0f0f0  ;width: 250rpx;height: 500rpx;display: flex;margin-left: 25rpx;background-color: white;display: flex;flex-direction: column;justify-content: space-around;">
					<image src="../../../../static/drink3.png" style="width: 200rpx;height: 260rpx;margin-left: 20rpx;"></image>
					<span style="font-weight: bold;font-size: 32rpx;margin-left: 5rpx;">冰鲜山茶花</span>
					<view style="display: flex;width: 250rpx;align-items: center;">
						<span style="color: red;font-weight: 700;font-size: 35rpx;">￥6</span>
						<span @click="noItem()" style="line-height: 60rpx;font-size: 55rpx;text-align: center;margin-left:100rpx;height: 65rpx;width: 65rpx;border-radius: 150rpx;background-color: green;color: white;">+</span>
					</view>
				</view>
				<view style="box-shadow:  2rpx 6rpx 5rpx 1rpx #f0f0f0  ;width: 250rpx;height: 500rpx;display: flex;margin-left: 25rpx;background-color: white;display: flex;flex-direction: column;justify-content: space-around;">
					<image src="../../../../static/drink3.png" style="width: 200rpx;height: 260rpx;margin-left: 20rpx;"></image>
					<span style="font-weight: bold;font-size: 32rpx;margin-left: 5rpx;">冰鲜山茶花</span>
					<view style="display: flex;width: 250rpx;align-items: center;">
						<span style="color: red;font-weight: 700;font-size: 35rpx;">￥6</span>
						<span @click="noItem()" style="line-height: 60rpx;font-size: 55rpx;text-align: center;margin-left:100rpx;height: 65rpx;width: 65rpx;border-radius: 150rpx;background-color: green;color: white;">+</span>
					</view>
				</view>
			</view>
		</view>
		<image src="../../../../static/广告.png" style="position: absolute;top: 920rpx;width: 750rpx;height: 120rpx;"></image>
		
		<view class="main">
			<view :class="left_class" id="left">
				<view :class="left_item_class1" id="left1" @click="left1()">
					<image src="../../../../static/left1.png" style="width: 60rpx;height: 90rpx;padding-bottom: 15rpx;"></image>
					<span style="text-align: center;">阿水当季必点</span>
				</view>
				<view :class="left_item_class2" id="left2" @click="left2()">
					<image src="../../../../static/left2.png" style="width: 80rpx;height: 80rpx;"></image>
					<span >鲜果 茶</span>
				</view>
				<view :class="left_item_class3" id="left3" @click="left3()">
					<image src="../../../../static/left3.png" style="width: 80rpx;height: 80rpx;"></image>
					<span>超人气奶茶</span>
				</view>
				<view :class="left_item_class4" id="left4" @click="left4()">
					<image src="../../../../static/left4.png" style="width: 80rpx;height: 80rpx;"></image>
					<span>鲜沏茶</span>
				</view>
			</view>
			<view class="right">
				<view style="width: 550rpx;">
					<span style="font-size: 30rpx;color: grey;">阿水当季必点</span>
					
					<view v-for="( item , index ) in all" :key="index">
						
						<view style="display: flex;flex-direction: column;align-items: center;width: 550rpx;margin-top: 40rpx ;">
							<view style="display: flex;align-items: center;height: 200rpx;">
								<image :src="item.image" style="height: 200rpx;width: 175rpx;"></image>
								<view>
									<h4 style="font-weight: 700;">{{item.name}}</h4>
									<span style="font-size: 30rpx;color: darkgray">{{item.describe}}</span>
									<view style="display: flex;">
										<view style="display: flex;"><span style="font-weight: bold;">￥{{item.price}}</span><span style="font-size: 30rpx;padding-top: 10rpx;margin-left: 10rpx;">起</span></view>
										<span @click="choose(item)" style="text-align: center;line-height: 50rpx;margin-left: 120rpx;width: 120rpx;height: 50rpx;background-color: green;border-radius: 30rpx;color: white;font-size: 30rpx;">选规格</span>
									</view>
								</view>
							</view>
						</view>
						
					</view>
					
				</view>
				
				<view class="r1">
					<span style="font-size: 30rpx;color: grey;">鲜果 茶</span>
					<view v-for="( item , index ) in all" :key="index">
						
						<view style="display: flex;flex-direction: column;align-items: center;width: 550rpx;margin-top: 40rpx ;">
							<view style="display: flex;align-items: center;height: 200rpx;">
								<image :src="item.image" style="height: 200rpx;width: 175rpx;"></image>
								<view>
									<h4 style="font-weight: 700;">{{item.name}}</h4>
									<span style="font-size: 30rpx;color: darkgray">{{item.describe}}</span>
									<view style="display: flex;">
										<view style="display: flex;"><span style="font-weight: bold;">￥{{item.price}}</span><span style="font-size: 30rpx;padding-top: 10rpx;margin-left: 10rpx;">起</span></view>
										<span @click="choose(item)" style="text-align: center;line-height: 50rpx;margin-left: 120rpx;width: 120rpx;height: 50rpx;background-color: green;border-radius: 30rpx;color: white;font-size: 30rpx;">选规格</span>
									</view>
								</view>
							</view>
						</view>
						
					</view>
					
				</view>
				
				<view class="r1">
					<span style="font-size: 30rpx;color: grey;">超人气奶茶</span>
					<view v-for="( item , index ) in all" :key="index">
						
						<view style="display: flex;flex-direction: column;align-items: center;width: 550rpx;margin-top: 40rpx ;">
							<view style="display: flex;align-items: center;height: 200rpx;">
								<image :src="item.image" style="height: 200rpx;width: 175rpx;"></image>
								<view>
									<h4 style="font-weight: 700;">{{item.name}}</h4>
									<span style="font-size: 30rpx;color: darkgray">{{item.describe}}</span>
									<view style="display: flex;">
										<view style="display: flex;"><span style="font-weight: bold;">￥{{item.price}}</span><span style="font-size: 30rpx;padding-top: 10rpx;margin-left: 10rpx;">起</span></view>
										<span @click="choose(item)" style="text-align: center;line-height: 50rpx;margin-left: 120rpx;width: 120rpx;height: 50rpx;background-color: green;border-radius: 30rpx;color: white;font-size: 30rpx;">选规格</span>
									</view>
								</view>
							</view>
						</view>
						
					</view>
					
				</view>
				
				<view class="r1">
					<span style="font-size: 30rpx;color: grey;">鲜沏茶</span>
					<view v-for="( item , index ) in all" :key="index">
						
						<view style="display: flex;flex-direction: column;align-items: center;width: 550rpx;margin-top: 40rpx ;">
							<view style="display: flex;align-items: center;height: 200rpx;">
								<image :src="item.image" style="height: 200rpx;width: 175rpx;"></image>
								<view>
									<h4 style="font-weight: 700;">{{item.name}}</h4>
									<span style="font-size: 30rpx;color: darkgray">{{item.describe}}</span>
									<view style="display: flex;">
										<view style="display: flex;"><span style="font-weight: bold;">￥{{item.price}}</span><span style="font-size: 30rpx;padding-top: 10rpx;margin-left: 10rpx;">起</span></view>
										<span @click="choose(item)" style="text-align: center;line-height: 50rpx;margin-left: 120rpx;width: 120rpx;height: 50rpx;background-color: green;border-radius: 30rpx;color: white;font-size: 30rpx;">选规格</span>
									</view>
								</view>
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
			
		</view>
		
			
			<Choose v-show="ifbuy[0]"   ref="choose"  :class="{choose:slide[0]}" ></Choose>
			<!-- v-show时props传值无效  v-if时$ref无效 -->
			
	        <view v-if="items_list.length>0" @click="test()" class="shopping">
				<view style="margin-left: 50rpx;display: flex;align-items: center;">
					<image src="../../../../static/shopping.png" style="height: 80rpx;width: 80rpx;"></image>
					<span style="left: 150rpx;font-size: 30rpx;bottom: 210rpx;position: fixed;padding-top: 5rpx;text-align: center;height: 38rpx;width: 40rpx;border-radius: 100rpx;background-color: green;color: white;">{{count}}</span>
					<view style="margin-left: 40rpx;z-index: 110;">
						<span style="color: white;">￥</span>
						<span style="color: white;font-size: 40rpx;">{{total_price}}</span>
					</view>
					
				</view>
				<span @click.stop="goPay()" style="color: white;width: 180rpx;height: 95rpx;border-radius:0rpx 70rpx 70rpx 0rpx;background-color: green;text-align: center;padding-top: 35rpx;">
					去结算
				</span>
			</view>	
		
			<ItemsList :class="{items_list:!items_boo1,items_list1:items_boo2,items_list_fixed:items_boo}" ref="items_list" ></ItemsList>
		
			<view class="nav">
				<view class="item" @click="skipToShouye()">
					<image src="../../../../static/首页.png" class="pic" style="margin-left: 18rpx;"></image>
					<span class="word">首页</span>
				</view>
				<view class="item" @click="skipToBuy()">
					<image src="../../../../static/点单.png" class="pic"></image>
					<span class="word">点单</span>
				</view>
				<view class="item" @click="skipToMyOrder()">
					<image src="../../../../static/订单.png" class="pic"></image>
					<span class="word">订单</span>
				</view>
				<view class="item" @click="skipToMine()">
					<image src="../../../../static/我的.png" class="pic"></image>
					<span class="word">我的</span>
				</view>
				
			</view>
		
	</view>
</template>

<script>
	import info from "../info/info.vue"
	import choose from "../choose/choose.vue"
	import nav from "../../navv/nav.js"
	import items_list from "../items_list/items_list.vue"
	export default {
		data() {
			return {
				left_class:['left'],
				left_item_class1:['left_item'],
				left_item_class2:['left_item'],
				left_item_class3:['left_item'],
				left_item_class4:['left_item'],
				info_boo:[false],
				ifbuy:[false],
				// image:{value:""},
				items_list:[],
				total_class:false,
				slide:[false],
				all:[],
				
				
				cover_boo:false,
				cover_boo1:false,
				items_boo:false,
				items_boo1:false,
				items_boo2:false,
				fuck:true,
				icount:{a:1},
				shop_name:"",
				shop_addr:"",
				search:""
				
			}
		},
		components:{
			Info:info,
			Choose:choose,
			ItemsList:items_list
		},
		
		beforeCreate() {
			let t=this;
			uni.request({
				url:"http://localhost:3000/getAll",//获取商品详情
				success(arr) {
					t.all=arr.data
				}
			})
		}
		,
		
		mounted() {
				let t=this;
				uni.request({
					url:"http://localhost:3000/getItems",//获取购物车商品
					success(data) {
						for(let i=0;i<data.data.length;i++){
							t.items_list.push(data.data[i])
							//console.log(data.data[i])
						}
					}
				})			
		},
		computed:{
			total_price:{
				get(){
					let t=this
					var total=0;
					for(let i=0;i<t.items_list.length;i++){
						total+=t.items_list[i].price*t.items_list[i].num;
					}
					return total
				},
				set(){
					
				}
			},
			count:{
				get(){
					let t=this
					var total=0;
					for(let i=0;i<t.items_list.length;i++){
						total+=t.items_list[i].num;
					}
					return total
				},
				set(){
					
				}
			}
		},
		onLoad(value) {//接收门店信息
			this.shop_name=value.shop_name
			this.shop_addr=value.shop_addr
		},
		onShow() {
			
				uni.request({
					url:"http://localhost:3000/delPay",
					success(data) {
						console.log("删除了pay")
					}
				})

			let t=this;
			
			t.$refs.items_list.change=function(index){//切换选中
				let f=t.$refs.items_list.check_obj
				if(f["check"+index]=="check"){
					// t.$set(t.check_obj,"check"+index,"uncheck") 
					// console.log(t.check_obj["check"+index])
					t.items_list.splice(index,1,{name:" ",price:0,num:0,detail:" "})
					f["check"+index]="uncheck"
				}
				else if(f["check"+index]=="uncheck"){
					let a={};
					a.name=t.$refs.items_list.items_list[index].name
					a.num=t.$refs.items_list.items_list[index].num
					a.price=t.$refs.items_list.items_list[index].price
					a.detail=t.$refs.items_list.items_list[index].detail
					t.items_list.splice(index,1,a)
					f["check"+index]="check"
				}
			}
			
			t.$refs.items_list.selectAll=(length)=>{//选中全部
				
				let f=t.$refs.items_list.select_all_class
				if(f["check"]=="check"){
					// t.$set(t.check_obj,"check"+index,"uncheck") 
					// console.log(t.check_obj["check"+index])
					for(let i=0;i<length;i++){
						let ff=t.$refs.items_list.check_obj
						if(ff["check"+i]=="check"){
							t.$refs.items_list.change(i)
						}
						
					}
					f["check"]="uncheck"
				}
				else if(f["check"]=="uncheck"){
					for(let i=0;i<length;i++){
						let ff=t.$refs.items_list.check_obj
						if(ff["check"+i]=="uncheck"){
							t.$refs.items_list.change(i)
						}
					}
					f["check"]="check"
				}
			}
			
			t.$refs.items_list.sub=(index) => {//商品数量减一
				if(t.$refs.items_list.items_list[index].num>1&&t.items_list[index].name!=" "){
					t.$refs.items_list.items_list[index].num--
					t.items_list[index].num--
				}
			};
			t.$refs.items_list.add=(index) => {//商品数量加一
				if(t.items_list[index].name!=" "){
					t.$refs.items_list.items_list[index].num++
					t.items_list[index].num++
					//console.log(t.$refs.items_list.items_list)
				}
				
			}
			t.$refs.items_list.clear=()=>{//清空购物车
				uni.request({
					url:"http://localhost:3000/clearItems",
					success(data) {
						console.log("已清空")
					}
				})
				uni.request({
					url:"http://localhost:3000/getItems",
					success(data) {
						t.items_list=[]
						for(let i=0;i<data.data.length;i++){	
							t.items_list.push(data.data[i])
						}
						
					}
				})
				t.test()
			}
			
			this.$refs.info.up=function(){t.info_boo[0]=!t.info_boo[0]}
			this.$refs.choose.close=function(){
				t.ifbuy[0]=!t.ifbuy[0];
				t.total_class=!t.total_class;
				t.slide[0]=!t.slide[0];
				t.$refs.choose.if_fixed=[false];
				t.left1();
										
						 }
			this.$refs.choose.buy=function(){//加入购物车
	
				t.$refs.choose.close();
				
				let a={
					image_name:t.$refs.choose.image_name,
					price:t.$refs.choose.price,
					number: t.$refs.choose.number,
					name:t.$refs.choose.name,
					detail:t.$refs.choose.describe,
					shop_name:t.$refs.choose.shop_name,
					shop_addr:t.$refs.choose.shop_addr
				}
				uni.request({
					url:"http://localhost:3000/insertItem",
					data:JSON.stringify(a),
					method:"POST",
					 dataType:"application/json",
					success(data) {
						console.log("插入订单成功")
					}
					
				})
				t.$refs.items_list.getItems()
				
				uni.request({
					url:"http://localhost:3000/getItems",
					success(data) {
						t.items_list=[]
						for(let i=0;i<data.data.length;i++){
							t.items_list.push(data.data[i])
						}
					}
				})
				t.$refs.items_list.init()
				uni.reLaunch({
					url:"/pages/index/buy/list/list?shop_name="+t.shop_name+"&shop_addr="+t.shop_addr
				})
				
			}
			
			this.timer=setInterval(()=>{//左侧商品栏点击和自动高亮
					let query = uni.createSelectorQuery().in(this);
					query.select('.right').boundingClientRect(data => {
					  
					  //console.log("节点离页面顶部的距离为" + data.top);
					  if(data.top<=140&&data.top> -224){
						  this.left_class=['left_fixed'];
						  this.left_item_class1=['left_item_checked'];
						  this.left_item_class2=['left_item']
						  this.left_item_class3=['left_item']
						  this.left_item_class4=['left_item']
						  
					  }
					  if(data.top<=-224&&data.top> -585){
						  this.left_class=['left_fixed'];
					  	  this.left_item_class1=['left_item'];
					  	  this.left_item_class2=['left_item_checked']
						  this.left_item_class3=['left_item']
						  this.left_item_class4=['left_item']
					  }
					  if(data.top<=-585&&data.top> -930){
					  	  this.left_class=['left_fixed'];
					  	  this.left_item_class1=['left_item'];
					  	  this.left_item_class2=['left_item']
					  	  this.left_item_class3=['left_item_checked']
					  	  this.left_item_class4=['left_item']
					  }
					  if(data.top<=-930){
					  	  this.left_class=['left_fixed'];
					  	  this.left_item_class1=['left_item'];
					  	  this.left_item_class2=['left_item']
					  	  this.left_item_class3=['left_item']
					  	  this.left_item_class4=['left_item_checked']
					  }
					  if(data.top>140){
						  this.left_class=['left'];
						  this.left_item_class1=['left_item'];
						  this.left_item_class2=['left_item'];
						  this.left_item_class3=['left_item'];
						  this.left_item_class4=['left_item'];
					  }
					  
					}).exec();
					
				
				},100)
		},
		onHide(){
			clearInterval(this.timer)
		},
		methods: {
			...nav,
			doSearch(content){
				console.log(this.all)
				let temp=this.all.filter((value,index,array)=>{ if(value.name == content.value){return value}})[0]
				this.choose(temp)
			},
			test(){
				
				let t=this
				this.cover_boo=!this.cover_boo
				this.total_class=!this.total_class;

				if(this.icount.a>=1){
					t.items_boo1=true
					
				}
				
				if((this.icount.a%2)!=0){
					
					t.items_boo2=false
					t.items_boo=!t.items_boo
					t.cover_boo1=false
					t.cover_boo=true
				}
				if((this.icount.a%2)==0){
					
					t.items_boo=false
					t.items_boo2=!t.items_boo2
					t.cover_boo=false
					t.cover_boo1=true
					setTimeout(()=>{
						t.scroll()
					},100)
				}
				this.icount.a++
				console.log(t.items_list)
				
				
			},
			scroll(){
					uni.pageScrollTo({
						scrollTop:308
					})
			},
			noItem(){
				uni.showModal({
					title: '提示',
					content: '该商品暂时无货~',
					success: function (res) {
						// if (res.confirm) {
						// 	console.log('用户点击确定');
						// } else if (res.cancel) {
						// 	console.log('用户点击取消');
						// }
					}
				});
			},
			choose(item){
				var t=this;
				this.$refs.choose.image_name=item.image
				this.$refs.choose.name=item.name
				this.$refs.choose.info=item.describe
				this.$refs.choose.price=item.price
				this.$refs.choose.shop_name=t.shop_name
				this.$refs.choose.shop_addr=t.shop_addr
				// this.$set(this.image,"value","r_drink1")
				
				this.ifbuy[0]=!this.ifbuy[0];
				this.slide[0]=!this.slide[0];
				t.total_class=!t.total_class;
				this.timeout=setTimeout(()=>{t.$refs.choose.if_fixed=[true]},500);

			},
			
			waimai(){
				uni.showModal({
					title: '提示',
					content: '暂时还没有外卖服务~',
					success: function (res) {
						// if (res.confirm) {
						// 	console.log('用户点击确定');
						// } else if (res.cancel) {
						// 	console.log('用户点击取消');
						// }
					}
				});
				
			},
			left1(){
				let query = uni.createSelectorQuery().in(this);
				query.select('.right').boundingClientRect(data => {
				 
				  uni.pageScrollTo({
				  	scrollTop:308
				  })
  
				  }).exec();
				  
			},
			left2(){
				let query = uni.createSelectorQuery().in(this);
				query.select('.right').boundingClientRect(data => {
				  uni.pageScrollTo({
				  	scrollTop:680
				  })
					  
					  
				  }).exec()
			},
			left3(){
				let query = uni.createSelectorQuery().in(this);
				query.select('.right').boundingClientRect(data => {
				  
				  uni.pageScrollTo({
				  	scrollTop:1040
				  })
	  
				  }).exec()
				  
			},
			left4(){
				let query = uni.createSelectorQuery().in(this);
				query.select('.right').boundingClientRect(data => {
				  
				  uni.pageScrollTo({
				  	scrollTop:1400
				  })
					  
					  
				  }).exec()
			},
			info(){
				this.info_boo[0]=!this.info_boo[0]
				
			},
			lookItemsList(){
				
			},
			moveStop(){},
			goPay(){
				let t=this
				uni.request({
					method:"POST",
					dataType:"application/json",
					url:"http://localhost:3000/insertPay",
					data:JSON.stringify(t.items_list),
					success(data) {
						console.log("插入了pay")
					}
				})
				uni.navigateTo({
					url:"../pay/pay?shop_name="+t.shop_name+"&shop_addr="+t.shop_addr
				})
				
				
			}
		}
	}
</script>

<style scoped>
.total{
	width: 750rpx;
	height: 3500rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f8f8f8;
	z-index: 1;
	
}
.total1{
	width: 750rpx;
	height: 1000rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f8f8f8;
	z-index: 1;
	overflow: hidden;
}
/* .head{
	
	display: flex;
	
	justify-content: flex-end;
	position: fixed;
	z-index: 99;
	background-color:white;
	width: 760rpx;
	height: 220rpx;
	
} */
.intro{
	width: 740rpx;
	height: 250rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	padding-left: 30rpx;
	position: fixed;
	z-index: 99;
	top: 0rpx;
	background-color: #f8f8f8;

}
.recommend{
	margin-top: 350rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 700rpx;
	height: 600rpx;
	position: absolute;
	z-index: 3;
	background-color: #f8f8f8;
	}
	.main{
		
		margin-top: 1050rpx;
		width: 750rpx;
		height: 3500rpx;
		display: flex;
		justify-content: flex-end;
		background-color: white;
	}
	.left{
		background-color: #f1f1f1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 175rpx;
		height: 865rpx;
	}
	.left_fixed{
		background-color: #f1f1f1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 175rpx;
		height: 865rpx;
		position: fixed;
		top: 240rpx;
		left: 0rpx;
	}
	
	.left_item{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		font-size: 32rpx;
		color: gray;
		height: 220rpx;
		width: 100%;
	}
	.left_item_checked{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		font-size: 32rpx;
		color: green;
		font-weight: bold;
		height: 220rpx;
		background-color: white;
		width: 100%;
	}
	.right{
		width: 550rpx;
		height: 3500rpx;
		overflow: scroll;
		background-color: white;
		padding-left: 30rpx;
	}
	.r1{
		width: 550rpx;
		margin-top: 100rpx;
	}
	.choose{
		position: fixed;
		top:0rpx;
		
		z-index: 131;
		animation: move 0.3s ;
		animation-iteration-count: 1;
	}
	.shopping{
		position: fixed;
		bottom: 140rpx;
		left: 30rpx;
		border-radius: 70rpx;
		width: 700rpx;
		height: 130rpx;
		display: flex;
		justify-content: space-between;
		background-color: #393939;
		z-index: 121;
	}
	.nav{
			display: flex;
			position: fixed;
			top:92%;
			background-color: white;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			width: 750rpx;
			height: 120rpx;
			border-top: 2rpx;
			border-style: solid;
			border-width: 2rpx;
			border-color: #d0d0d0;
			z-index: 230;
		}
		.word{
			font-size: 25rpx;
		}
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			align-content: center;
			width: 65rpx;
			height:95rpx;
			padding: 5rpx;
		}
		.pic{
			width: 60rpx;
			height: 80rpx;
		}
	@keyframes move{
		0% {top:1000rpx;}
		
		100% {top:0rpx;}
	}
	
	.cover_all{
		height:100% ;
		width: 100%;
		background-color: black;
		z-index: 119;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		animation: cover 0.5s;
		opacity: 0.5;
		animation-iteration-count: 1;
		
	}
	.cover_fade{
		
		background-color: black;
		z-index: 119;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		animation: coverfade 0.5s;
		opacity: 0;
		animation-iteration-count: 1;
	}
	@keyframes cover{
		0% {
			opacity: 0;
			height:100% ;
			width: 100%;
			}
		100% {
			opacity: 0.5;
			height:100% ;
			width: 100%;
			}
	}
	@keyframes coverfade{
		0% {opacity: 0.5;}
		100% {opacity: 0;}
	}
	
	.items_list{
		position: fixed;
		z-index: 120;
		top:1500rpx;
		left: 0rpx;
	}
	
	.items_list1{
		position: fixed;
		z-index: 120;
		bottom: -1000rpx;
		left: 0rpx;
		animation: slide1 0.5s;
		animation-iteration-count: 1;
	}
	@keyframes slide1{
		
		0% {bottom: 0rpx;}
		100% {bottom: -1000rpx;}
	}
	
	.items_list_fixed{
		z-index: 120;
		animation: itemsslide 0.5s ;
		animation-iteration-count: 1;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
	}
	@keyframes itemsslide{
		0% {bottom: -800rpx;}
		100% {bottom: 0rpx;}
	}
</style>
